<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-recommendation-container`]">
      <view class="dialogue" ref="box">
        <view v-for="(item, index) in charData" :key="index">
          <view class="time">{{ item.time }}</view>
          <view v-for="(items, indexs) in item.list">
            <view class="input-container" v-if="items.role === '1'">
              {{ items.message }}
            </view>
            <view class="reply-container" v-else>
              {{ items.message }}
            </view>
          </view>
        </view>
      </view>
      <view class="fixed-wrap" v-if="status != '已评价'">
        <uv-button v-if="status == '已关闭'" text="我要评价" type="primary" @click="handleEvaluate()"></uv-button>
        <view v-else class="input-wrap">
          <uv-input placeholder="请输入反馈内容" border="surround" v-model="message" />
          <uv-button style="margin-left: 15px; padding: 0 5px" text="发 送" type="primary" @click="submitMessage()"></uv-button>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
      <uv-popup ref="popup" :closeable="true" :safeAreaInsetBottom="true">
        <view class="evaluate-container">
          <view class="title">反馈评价</view>
          <view class="evaluate-type">
            <view :class="{ active: evaluateName === 0 }" class="type no-satisfied" @click="handleEvaluateType(0)">
              <uv-icon :color="evaluateName === 0 ? theme : ''" name="thumb-down"></uv-icon>
              不满意
            </view>
            <view :class="{ active: evaluateName === 1 }" class="type satisfied" @click="handleEvaluateType(1)">
              <uv-icon :color="evaluateName === 1 ? theme : ''" name="thumb-up"></uv-icon>
              满意
            </view>
          </view>
          <view class="evaluate-tags">
            <view :class="{ active: selectTag.includes(item) }" class="tags-item" v-for="(item, index) in tags" :key="index" @click="handleSelectTag(item)">
              {{ item }}
            </view>
            <uv-textarea v-model="message" placeholder="其他想说的"></uv-textarea>
          </view>
          <view class="fixed-wrap">
            <uv-button text="确认提交" type="primary" @click="handleSubmit()"></uv-button>
            <uv-safe-bottom></uv-safe-bottom>
          </view>
        </view>
      </uv-popup>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { chatHistory, postEvaluate, reply } from './api'

export default {
  name: 'proposeDetail',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      tags: [],
      evaluate: ['服务贴心', '高效专业', '处理高效', '有求必应', '店长帅帅/美美哒', '维修效率高', '快速响应', '完美解决问题', '热情周到', '星级服务'],
      noEvaluate: ['服务态度差', '维修慢', '房间质量差', '未解决问题', '巨坑爹', '有噪音', '社区环境脏了', '效率低', '沟通困难', '不够专业'],
      selectTag: [],
      status: '',
      charData: [],
      message: '',
      evaluateName: 1,
      evaluateEnum: {
        0: '不满意',
        1: '满意',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad() {
    this.getChatHistoryList()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    // 获取对话列表
    async getChatHistoryList() {
      const { id: feedback_id } = this.$Route.query
      const { data = [], detail } = await chatHistory({ feedback_id })
      this.charData = data
      this.status = detail.status
      this.$nextTick(() => {
        uni.pageScrollTo({
          scrollTop: 1000,
          duration: 100,
        })
      })
    },
    // 回复消息
    async submitMessage() {
      const { id } = this.$Route.query
      const { message } = this
      if (!message) return
      const { errcode } = await reply({ id, message })
      if (errcode === 0) {
        this.message = ''
        this.getChatHistoryList()
      }
    },
    // 点击我要评价
    handleEvaluate() {
      this.$refs.popup.open('bottom')
      this.tags = this.evaluate
    },
    handleEvaluateType(value) {
      this.evaluateName = value
      this.selectTag = []
      if (value === 0) {
        this.tags = this.noEvaluate
      } else {
        this.tags = this.evaluate
      }
    },
    handleSelectTag(item) {
      if (this.selectTag.includes(item)) {
        const findIndex = this.selectTag.findIndex((v) => v == item)
        this.selectTag.splice(findIndex, 1)
      } else {
        this.selectTag.push(item)
      }
    },
    submitReplyeHandler() {
      const data = {
        id: this.$Route.query.id,
        message: this.inputValue,
      }
      if (this.inputValue.trim().length > 0) {
        this.getChatHistoryList()
        submitReplye(data).then((res) => {
          console.log(res.data)
        })
      } else {
        this.inputValue = ''
        uni.$uv.toast('请您输入内容...')
      }
    },
    async handleSubmit() {
      const { id: feedbackId } = this.$Route.query
      const { evaluateName, selectTag, message, evaluateEnum } = this
      const test = selectTag.map((v) => {
        return v
      })
      const evaluate = '本次服务评价' + evaluateEnum[evaluateName] + ':' + test
      const { errcode } = await postEvaluate({ evaluate, remark: message, feedbackId, state: 2 })
      if (errcode === 0) {
        this.$refs.popup.close()
        this.$ROUTE.go('/pages/subpackage/recommendation/index')
      }
    },
    // 确定提交
    // 评价-确定提交
    submitsubmitEvaluate() {
      const data = {
        evaluate: '本次服务评价：' + this.btnFlag + '，' + this.evaluatValue,
        feedbackId: this.$Route.query.id,
        state: 2,
        remark: this.remark,
      }
      submitEvaluate(data).then(() => {
        this.close()
        this.$ROUTE.go('/pages/subpackage/recommendation')
      })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: #f5f5f5 !important;
}

.#{prefixCls('recommendation-container')} {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: #f5f5f5;
  // background: #ffffff;
  .dialogue {
    padding: 20px 16px 100px;
    .time {
      text-align: center;
      color: white;
      padding: 7px 15px;
      background: #d8d8d8;
      width: fit-content;
      margin: 20px auto;
      font-size: 12px;
      border-radius: 4rpx;
    }
    .input-container {
      max-width: 80%;
      width: fit-content;
      background: $uv-primary;
      color: white;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0 10px auto;
      position: relative;
      &::after {
        content: ' ';
        position: absolute;
        right: -7px;
        top: 16px;
        transform: rotate(-90deg);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid $uv-primary; /* 这是三角形的颜色 */
      }
    }
    .reply-container {
      max-width: 80%;
      width: fit-content;
      background: white;
      color: black;
      padding: 10px;
      border-radius: 4px;
      margin: 10px auto 10px 0;
      position: relative;
      &::after {
        content: ' ';
        position: absolute;
        left: -7px;
        top: 16px;
        transform: rotate(90deg);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid white; /* 这是三角形的颜色 */
      }
    }
  }
  .fixed-wrap {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    background: white;
    box-sizing: border-box;
    padding: 20rpx;
    .input-wrap {
      display: flex;
    }
  }
  .evaluate-container {
    height: 500px;
    padding-bottom: 80px;
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
    }
    .evaluate-type {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      .type {
        display: flex;
        font-size: 12px;
        margin: 0 20px;
        padding: 8px 15px;
        border-radius: 20px;
        border: 1px solid #cccccc;
      }
      .active {
        color: $uv-primary;
        border-color: $uv-primary;
      }
    }
    .evaluate-tags {
      margin: 30px;
      width: calc(100% - 60px);
      // padding: 0 30px;
      display: flex;
      flex-wrap: wrap;
      .tags-item {
        font-size: 12px;
        padding: 7px;
        border-radius: 5px;
        margin-bottom: 20px;
        margin-right: 20px;
        text-align: center;
        width: calc(50% - 10px);
        box-sizing: border-box;
        border: 1px solid #cccccc;
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
      .active {
        color: $uv-primary;
        border-color: $uv-primary;
      }
    }
  }
  //list
  .maximal {
    color: #0f0f0f;
    padding: 20rpx 40rpx;

    .timeSun {
      display: flex;
      flex-direction: row;
      justify-content: center;

      .time {
        padding: 10rpx;
        background: #e8e8e8;
        border-radius: 10rpx;
        color: #f5f5f5;
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
      }

      .notime {
        margin-top: 75%;
      }
    }
  }

  //头像
  .headPhoto {
    display: flex;
    flex-direction: row-reverse;
    margin: 20rpx 0rpx;
    color: #f5f5f5;

    .bigHead {
      margin-left: 20rpx;
    }

    .speech {
      background: $uv-primary;
      padding: 20rpx;
      border-radius: 8rpx;
      max-width: 64%;
    }
  }

  //回复
  .reply {
    display: flex;
    flex-direction: row;
    margin: 20rpx 0rpx;

    .bigHead {
      margin-right: 20rpx;
    }

    .speech {
      background: #f5f5f5;
      padding: 20rpx;
      border-radius: 8rpx;
      max-width: 64%;
    }
  }

  //按钮
  .btnBase {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 20rpx;
    width: 90%;
    padding: 0rpx 40rpx;
    background: #e1e1e1;

    .btn {
      display: flex;
      justify-content: center;
      padding: 30rpx 0rpx;
      background: $uv-primary;
      color: #e3e0e0;
      border-radius: 8rpx;
      letter-spacing: 10rpx;
      flex: 1;
    }
  }

  //聊天框
  .chatting {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 20rpx;
    width: 90%;
    left: 0;
    right: 0;
    padding: 0rpx 40rpx;

    .InputBox {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .enterBtn {
        margin-left: 10rpx;
      }

      //弹窗
      .popup {
        //标题
        .popupTitle {
          display: flex;
          padding: 30rpx;
          border-bottom: 1px solid #d2d2d2;

          .title {
            flex: 1;
            text-align: center;
          }
        }
      }

      //内容
      .popupCentent {
        padding: 40rpx;

        .cententBtn {
          margin: 40rpx 0;
          display: flex;
          justify-content: center;
          padding: 0 40rpx;

          .btn {
            margin-left: 40rpx;
          }

          .btnAction {
            background: $uv-primary;
            color: #fff;
          }
        }

        .evaluateCentent {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;

          .child {
            width: calc(40% - 60rpx);
            margin: 20rpx;
            border: 1px solid #d9d9d9;
            text-align: center;
            padding: 10rpx 40rpx;
            border-radius: 8rpx;
          }

          .cententAction {
            background: $uv-primary;
            color: #fff;
          }
        }

        .surround {
          padding: 10rpx 20rpx;
        }
      }
    }
  }
}
</style>
